<template>
  <div>
    <h1>和 ： {{sum}}</h1>
    <input type="text" v-model="name">
    <button @click="addPerson">添加</button>
    <button @click="addPerson1">添加1</button>
    <h3>{{person1.name}}</h3>
    <h1>PersonList:</h1>
    <ul>
      <li v-for="person in personList" :key="person.id">
        {{person.name}}
      </li>
    </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
  name: "Person",
  data(){
    return{
      name:''
    }
  },
  methods:{
    addPerson(){
      this.$store.dispatch('personAbout/addPerson',{id:nanoid(),name:this.name})
    },
    addPerson1(){
      this.$store.commit('personAbout/ADD_PERSON',{id:nanoid(),name:this.name})
    }
  },
  computed: {
    personList() {
      return this.$store.state.personAbout.personList
    },
    sum(){
      return this.$store.state.countAbout.sum
    },
    person1(){
      console.log(this.$store)
      return this.$store.getters["personAbout/person1"]
    }
  }
}
</script>

<style scoped>

</style>
